<template>
  <div>
    <app-loading :isHidLoading="isHidLoading"></app-loading>
    <message :theme="messageTheme" :message.sync="messageShow">
      <span>正在跳转到支付...</span>
    </message>
    <div class="pending" ref="pending">
      <ul>
        <li class="payStatus"
            v-for="(item, key) in payStatusCom" :key="key">
          <div class="pay_img">
            <div v-for="(img, index) in item.orderProd" :key="index">
              <img :src=" img.prodImg" alt="">
            </div>
          </div>
          <div class="pay_price" @click="payStatusFn(item)">
            <span class="payStatus_success" v-if="item.payStatus === 1">交易成功</span>
            <span class="payStatus_waring" v-if="item.payStatus === 0">待付款:</span>
            共{{numFn(item.orderProd)}}件商品:
            <span>￥{{priceFn(item.orderProd)}}&nbsp;</span>
          </div>
        </li>
        <li class="pay_box"></li>
      </ul>
    </div>

  </div>

</template>

<script>
  export default {
    name: "orderAll",
    data(){
      return{
        payStatusCom:null,
        isHidLoading:false,
        messageShow:false,
        messageTheme:1
      }
    },
    created(){
      this.isHidLoading = true;
      this.$http.get('/api/order').then(req=>{
        req.data.code === 1 && (this.payStatusCom = req.data.data.reverse());
      })
    },
    mounted(){
      this.$nextTick(()=>{
        new this.$BSscroll(this.$refs.pending,{
          //动画移动方向
          scrollY:true,
          //弹跳的方向
          bounce:{
            left:false,
            right:false,
            top:false,
            bottom:true
          },
          //动画速率
          momentum:true,
          click:true
        })
      })
    },
    methods:{
      priceFn(data){
        let pri = 0;
        data.forEach(item=>{pri+=item.num*item.price;});
        return Number(pri).toFixed(2);
      },
      numFn(data){
        let pri = 0;
        data.forEach(item=>{pri+=item.num;});
        return pri;
      },
      payStatusFn(val){
        if(val.payStatus===0){
          this.isHidLoading = true;
          this.$http.post('/api/accounts',{orderid:val._id}).then(req=>{
            if(req.data.code===1){
              this.messageShow = true;
              setTimeout(()=>{
                window.location.href = req.data.data.pay_url;
                this.isHidLoading = false;
              },500)
            }
          })
        }
      }
    },
    watch:{
      payStatusCom(){
        if(this.payStatusCom){
          this.isHidLoading = false;
        }
      }
    }

  }
</script>

<style scoped>
  .pending{
    height: 100vh;
    overflow: hidden;
  }
  .pay_box{
    text-align: center;
    font-size: 24px;
    color: #a7a7a7;
    height: 420px;
  }
  ul{
    margin: 0;
    list-style: none;
  }
  ul>li{
    font-size: 32px;
    line-height: 80px;
    width: 100%;
  }
  .payStatus{
    border-bottom: 1px solid #f4f4f4;
  }
  .pay_price{
    color: #7f7f7f;
    padding: 0 50px;
    text-align: right;
    font-size: 32px;
  }
  .pay_price>span{
    color: #4a4a4a;
    font-family: 华文细黑;
    font-weight: bold;
  }
  .payStatus_success,.payStatus_waring{
    display: inline;
    padding: 10px 20px;
    border-radius: 40px;
  }
  .pay_price>.payStatus_success {
    font-weight: 400;
    color:#67c23a;
    background: #f0f9eb;
    border: 1px solid #e1f3d8
  }
  .pay_price>.payStatus_waring{
    font-weight: 400;
    background: #fffaef;
    color: #e6a23c;
    border:  1px solid #fbeedb;
  }
  .pay_img{
    width: 100vw;
    overflow: hidden;
    padding: 0 20px;
    display: inline-block;
    box-sizing: border-box;
    height: 160px;
    line-height: 160px;
    background: #fafafa;
  }
  .pay_img>div{
    border-radius: 10px;
    margin-left: 20px;
    margin-top: 15px;
    max-height: 130px;
    background: #fff;
    display: inline-block;
  }

  .pay_img>div>img{
    max-width: 130px;
    max-height: 130px;
    /*margin-left: 20px;*/
  }
</style>
